<template>
    <div class="goods_list">
        <div class="goods_one">

            <div class="operation_goods">
                <span class="delect-intent" style="color: #000c17;font-weight: bold;" v-if="moreDelectId.length" @click="batchDelet">删除 <i class="el-icon-delete"></i></span>
                <span class="delect-intent" style="cursor: no-drop;" v-else >删除 <i class="el-icon-delete"></i></span>
            </div>
            <!--    商品信息列表    -->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="selectFun">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="50"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品名"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="pice"
                        label="单价/元"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="goods_stock"
                        label="库存"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="details"
                        label="系列"
                        width="300"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="img_url"
                        label="图片"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100%; height: 100%"
                                :src="scope.row.img_url"
                                fit="fit">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="changeGoods(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--    分页    -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodsList",
        props:['tableData','total','size','currentPage','moreDelectId'],
        data() {
            return {}
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            selectFun(selection){
                this.$parent.moreDelectId = selection;
            },
            batchDelet(){
                this.$parent.check();
            },
            //    分页方法
            handleSizeChange(val) {
                this.$parent.size = val;
                this.$parent.currentPage = 1;
                this.$parent.showList();
            },
            handleCurrentChange(val) {
                this.$parent.currentPage = val;
                this.$parent.showList();
            },
            changeGoods(row){
                this.$parent.openDrawer(row,1);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .goods_list{
        .goods_one{
            height: 550px;
            overflow: auto;
        }
        .goods_one::-webkit-scrollbar {
            width: 4px;
            scrollbar-arrow-color:red;
        }
        .block{
            text-align: center;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .operation_goods{
            height: 50px;
            width: 100%;
            .delect-intent{
                font-size: 16px;
                color: #c0c4cc;
                letter-spacing: 0.56px;
                line-height: 60px;
                margin-left: 40px;
                cursor: pointer;
            }
        }
    }
</style>
